<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>error</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
  </head>
  <style type="text/css">
  	body{
		width:100%;
		height:800px;
		margin: 0 auto;
		text-align:center;	
		background-color:#ddd;
	}
	img{
		width:492px;
		height:364px;
		margin-top:100px;
		position:relative;
	}
  </style>
  <script type="text/javascript">
  	window.onload = function(){
		var t = new r();
		//t.run();
		window.document.body.onscroll = function(event){
			//document.body.onscroll = null;
			event = event || window.event;
			var target = event.target || event.srcElement;
			var body = target.body;
				document.getElementById("height1").innerHTML = body.scrollTop;
				document.getElementById("height2").innerHTML = body.clientHeight;
				document.getElementById("height3").innerHTML = body.clientTop;
			if(body.scrollTop>body.scrollTopMax-100){
				//event.preventDefault();
				//event.stopPropagation();
			}
		}
	}
	var r = function(){
		function r(){
			var targ = true;
			this.run = function(){
				setInterval(function(){
					var image = document.getElementsByTagName("img")[0];
					if(image.height<100){
						targ = false;	
					}
					else if(image.height > 364)
						targ = true;
					if(targ){
						image.style.height = image.height - 4+"px" ;
						image.style.width = image.width - 4+"px";	
					}	
					else{
						image.style.height = image.height + 4+"px" ;
						image.style.width = image.width + 4+"px";
					}
				},50);				
			}
		}
		return new r();	
	}
	var move = function(o){
		var target = function(){
			this.id;
			this.obj ;
			this.speed;
			this.x;
			this.y;	
			this.interval;
			this.init = function(o){
				this.obj = o;
				this.x = 0;
				this.y = 5;	
			}
		}
		var m = function(o){
			this.arr = new Array();
			//开始动画
			this.start = function(o){
				var t = new target();
				t.init(o);
				t.interval = setInterval(change(),speed);
				arr.push(t);
			}
			//结束动画
			this.end = function(){
				clearInterval(arr[0].interval);
			}
			var change = function(){
				if(crash()){
						
				}
				else if(width > 1000||width < 10){
							
				}
				else if(height > 1000||height < 10){
					
				}
				x = x + x;
				y = y + y;
				setObj(x,y);
			}
			//碰撞后的方向，此处实现的方向满足反弹效果
			var crash = function(){
				return false;
			}
			var mouseover = function(){
				end();
			}
			var mouseout = function(){
				start();
			}
			var mouseclick = function(){
				end();
			}
			var setObj = function(x,y){
				obj.style.height = obj.height + y +"px";
				obj.style.width = obj.width + x +"px";	
			}
		}
		return new m(o);	
	}
  </script>
  <body>
    <section>
    	<img src="pages/error.jpg"/>
        <h1 style="color:red;">There are something wrong !</h1>
        <label id="height1">aaaaaa</label>
        <label id="height2">aaaaaa</label>
        <label id="height3">aaaaaa</label>
    </section>
  </body>
</html>
